<!DOCTYPE html>
<html lang="zh-Hans-CN">
<head>
  <% include("/include/header3.html",{"title":"系统人员详情页"}){} %>
  <style>
    .t-form-item__name {
      line-height: 20px;
    }

    .t-form__label {
      color: #909399;
    }
  </style>
</head>
<body>

<div id="app">
  <div class="mainBox ">
    <div class="main-container layui-card">
      <div class="layui-card-body">
        <t-form v-loading="loading" colon label-width="120px">
          <t-row :gutter="[50,15]">
            <t-col :xs="12" :sm="6"><t-form-item label="人员名称">{{form.name}}</t-form-item></t-col>
            <t-col :xs="12" :sm="6"><t-form-item label="性别">{{form.sex}}</t-form-item></t-col>
            <t-col :xs="12" :sm="6"><t-form-item label="出生日期">{{form.birth}}</t-form-item></t-col>
            <t-col :xs="12" :sm="6"><t-form-item label="手机">{{form.phone}}</t-form-item></t-col>
            <t-col :xs="12" :sm="6"><t-form-item label="邮箱">{{form.email}}</t-form-item></t-col>
            <t-col :xs="12" :sm="6"><t-form-item label="员工编号">{{form.empNo}}</t-form-item></t-col>
            <t-col :xs="12" :sm="6"><t-form-item label="入职日期">{{form.entryDate}}</t-form-item></t-col>
            <t-col :xs="12" :sm="6"><t-form-item label="所在组织">{{form.orgName}}</t-form-item></t-col>
            <t-col :xs="12" :sm="6"><t-form-item label="所在职位">{{form.positionName}}</t-form-item></t-col>
            <t-col :xs="12" :sm="6">
              <t-form-item label="状态">
                <t-tag v-if="form.status===1" theme="primary">启用</t-tag>
                <t-tag v-else-if="form.status===0" theme="success">停用</t-tag>
                <t-tag v-else theme="warning">其他状态</t-tag>
              </t-form-item>
            </t-col>
            <t-col :xs="12" :sm="6"><t-form-item label="民族">{{form.nation}}</t-form-item></t-col>
            <t-col :xs="12" :sm="6"><t-form-item label="籍贯">{{form.nativePlace}}</t-form-item></t-col>
            <t-col :span="12"><t-form-item label="家庭住址">{{form.homeAddress}}</t-form-item></t-col>
            <t-col :span="12"><t-form-item label="通信地址">{{form.mailingAddress}}</t-form-item></t-col>
            <t-col :xs="12" :sm="6"><t-form-item label="证件类型">{{form.idCardType}}</t-form-item></t-col>
            <t-col :xs="12" :sm="6"><t-form-item label="证件号码">{{form.idCardNumber}}</t-form-item></t-col>
            <t-col :xs="12" :sm="6"><t-form-item label="文化程度">{{form.cultureLevel}}</t-form-item></t-col>
            <t-col :xs="12" :sm="6"><t-form-item label="政治面貌">{{form.politicalOutlook}}</t-form-item></t-col>
            <t-col :xs="12" :sm="6"><t-form-item label="毕业院校">{{form.college}}</t-form-item></t-col>
            <t-col :xs="12" :sm="6"><t-form-item label="学历">{{form.education}}</t-form-item></t-col>
            <t-col :xs="12" :sm="6"><t-form-item label="学制">{{form.eduLength}}</t-form-item></t-col>
            <t-col :xs="12" :sm="6"><t-form-item label="学位">{{form.degree}}</t-form-item></t-col>
            <t-col :xs="12" :sm="6"><t-form-item label="家庭电话">{{form.homeTel}}</t-form-item></t-col>
            <t-col :xs="12" :sm="6"><t-form-item label="办公电话">{{form.officeTel}}</t-form-item></t-col>
            <t-col :xs="12" :sm="6"><t-form-item label="紧急联系人">{{form.emergencyContact}}</t-form-item></t-col>
            <t-col :xs="12" :sm="6"><t-form-item label="紧急联系人电话">{{form.emergencyPhone}}</t-form-item></t-col>
            <t-col :span="12"><t-form-item label="紧急联系人地址">{{form.emergencyAddress}}</t-form-item></t-col>
            <t-col :span="12"><t-form-item label="备注">{{form.remake}}</t-form-item></t-col>
          </t-row>
        </t-form>
      </div>
    </div>
  </div>
  <div class="bottom">
    <t-space class="button-container ">
      <t-button theme="warning" @click="closeBtn.close"><i class="layui-icon mr-5 text-size-14" :class="closeBtn.i"></i>{{closeBtn.t}}</t-button>
    </t-space>
  </div>
</div>

<script>
  const PATH_URL = "sys/person/";
</script>

<script>

  setupVue("#app", {
    setup() {
      // 表单相关
      const loading = Vue.ref(false);
      const form = Vue.ref({
        status: 1,
      });
      // 获取表单数据
      const getForm = (id) => req(axiosGet, PATH_URL + "getInfo", { id }, (res) => {
        if (res.code === 200) {
          form.value = res.data;
        } else {
          $baseAlert(res.msg, () => closeBtn.value.close());
        }
      }, loading);
      const LyData = getLayerData();
      if (LyData && LyData.id) getForm(LyData.id);
      else {
        $baseAlert("参数错误", () => closeBtn.value.close());
      }


      const closeBtn = useCloseBtn();
      return {
        closeBtn, loading, form,
      }

    },
  });
</script>


</body>
</html>
